<template>
  <div class="easide">
    <ImageUpload :rules="rules"></ImageUpload>
    <ColorPicker :color="color"></ColorPicker>
    <ContentInput class="input"></ContentInput>
    <ContentPop></ContentPop>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ColorPicker from "@/components/common/color_picker.vue";
import ImageUpload from "@/components/common/image_upload.vue";
import ContentInput from "@/components/common/content_input.vue";
import ContentPop from "@/components/common/content_pop.vue";
import Iimage from "@/interface/Iimage";
import Icolor from "@/interface/Icolor";

@Component({
  components: {
    ImageUpload,
    ColorPicker,
    ContentInput,
    ContentPop,
  },
})
export default class Easide extends Vue {
  rules: Iimage = {
    accept: "image/*",
    id: "image",
    name: "image",
  };

  color: Icolor = {
    identity: "背景色",
    size: "small",
    defaultColor: "#409EFF",
  };
}
</script>

<style lang="scss" scoped>
//父元素设置为flex，子元素想同高，不设置height，参考 https://juejin.cn/post/6995874665616900109
.easide {
  width: 30%;
}
</style>
